<template>
	<div>
		<UserMsgItem>
			<div class="w-100" :style="boxStyle">
				<!-- 图片列表区域 -->
				<div class="img-grid">
					<div v-for="(item, index) in girlsList" :key="index" class="img-item">
						<img :src="item.img" alt="" />
						<div class="img-name">{{ item.english_name }}</div>
					</div>
				</div>
			</div>
		</UserMsgItem>
	</div>
</template>

<script setup>
	import UserMsgItem from "~/components/UserMsgItem.vue";
	import {
		ref,
		onMounted,
		onUnmounted,
		computed
	} from "vue";
	import {
		useToken
	} from "@/composables/useToken";
	
	const {
		get,
		post
	} = useFetchApi()

	const {
		getToken,
		clearToken
	} = useToken();

	const loginStatus = ref(false);
	const documentWidth = ref(0);
	const documentHeight = ref(0);
	
	const loadingState = ref(false)

	const pageSize = ref(500);
	const currentPage = ref(1);
	const girlsList = ref([])

	const boxStyle = computed(() => {
		const width = documentWidth.value - 280;
		const height = documentHeight.value - 60;
		return `width:${width}px;height:${height}px;overflow:auto;`;
	});

	const updateSize = () => {
		if (typeof window !== "undefined") {
			documentWidth.value = window.innerWidth;
			documentHeight.value = window.innerHeight;
		}
	};
	
	const girlprofilesData = async () => {
		try {
			const res = await get('/api/girlprofiles/list', {
				page: currentPage.value,
				page_size: pageSize.value
			});
			if (res.code === 200) {
				girlsList.value = res.data.list
				console.log('girlsList.value', girlsList.value);
				loadingState.value = true
			} else if (res.code == 400) {
				console.log(res.msg);
			}
		} catch (error) {
			console.error('Login failed:', error);
		}
	};

	onMounted( async() => {
		updateSize();
		window.addEventListener("resize", updateSize);
		
		const token = getToken();
		loginStatus.value = !!token;
		await girlprofilesData()
	});

	onUnmounted(() => {
		window.removeEventListener("resize", updateSize);
	});
</script>

<style scoped>
	.img-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 20px;
		padding: 20px;
		box-sizing: border-box;
	}

	/* 图片项 */
	.img-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 图片为正方形 */
	.img-item img {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s ease;
	}

	.img-item img:hover {
		transform: scale(1.05);
	}

	/* 图片名称 */
	.img-name {
		margin-top: 8px;
		font-size: 14px;
		text-align: center;
		color: #555;
	}

	/* 大屏幕时固定显示5列 */
	@media (min-width: 1200px) {
		.img-grid {
			grid-template-columns: repeat(5, 1fr);
		}
	}
</style>